import Patch from './patch.mdx'
import UniappHbuilderStyle from './UniappHbuilderStyle.mdx'

## 1. 安装

```bash npm2yarn
# 初始化 package.json
npm init
# 安装包
npm install -D tailwindcss @tailwindcss/postcss weapp-tailwindcss
```

<Patch />

## 2. 添加 `vite.config.ts`

```ts title="vite.config.ts"
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'
import path from 'node:path'

export default defineConfig({
  plugins: [
    uni(),
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      tailwindcssBasedir: __dirname,
      cssEntries: [
        // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
        path.resolve(__dirname, './src/app.css'),
      ],
    }),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          base: __dirname
        })
      ]
    }
  }
});
```

> tailwindcss@4 必须配置 `cssEntries` 并且使用绝对路径，否则 `tailwindcss` 生成的类名不会参与转译。

## 3. 添加样式

<UniappHbuilderStyle/>

现在，在你的页面里面去随意的编写样式，比如 `bg-[#123456] text-[#654321]`, 然后运行到微信开发者工具即可

## 参考模板

- [uni-app-x-hbuilderx 模板](https://github.com/icebreaker-template/uni-app-x-hbuilderx) 

- [uni-app-hbuilderx 模板](https://github.com/icebreaker-template/uni-app-hbuilderx-tailwindcss-v4) 
